---
name: 输入框 input
route: /input
---

import { Playground, PropsTable } from 'docz'
import Icon from '../icon/index.js'
import Input from './index.js'

import './index.scss'

# 输入框

睡起有恨和`画卷`，燕归无语傍人斜

## 代码演示

### 基本用法

<Playground>
  <Input />
</Playground>

### 大小

<Playground>
  <Input size='large' placeholder='大' />
  <Input placeholder='中' />
  <Input size='small' placeholder='小' />
</Playground>

### 宽度

<Playground>
  <Input placeholder='我很长' width={400} />
</Playground>

### 主题

多种主题配色，详情可见主页的提供配色，默认为梅红


<Playground>
  <Input theme='primary' placeholder='黛色' />
  <Input theme='success' placeholder='竹青' />
  <Input theme='danger' placeholder='胭脂' />
  <Input theme='meihong' placeholder='梅红' />
  <Input theme='ganglan' placeholder='钢蓝' />
  <Input theme='haitang' placeholder='海棠红' />
  <Input theme='yuanshan' placeholder='远山紫' />
</Playground>

### 前缀与后缀

<Playground>
  <Input addonBefore={'邮箱'} />
  <Input addonAfter='元' size='large' />
  <Input addonBefore='A' addonAfter={'Z'} size='small' />
</Playground>

### 添加图标

<Playground>
  <Input icon={<Icon type='search' />} placeholder='搜索' />
</Playground>

### 文本域

<Playground>
  <Input.Textarea placeholder='搜索' width={240} theme='ganglan' />
</Playground>

### 输入绑定

<Playground>
  <Input value='测试' onChange={() => alert('绑定测试')} />
</Playground>

### 不可用

<Playground>
  <Input disabled />
</Playground>

## 属性

<PropsTable of={Input} />
